<template>
  <n-card :bordered="false" class="proCard">
    <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
      <template #statusSlot="{ model, field }">
        <n-input v-model:value="model[field]" />
      </template>
    </BasicForm>

    <BasicTable :columns="columns" :request="loadDataTable" :row-key="(row) => row.id" ref="actionRef"
      :actionColumn="actionColumn" @update:checked-row-keys="onCheckedRow" :scroll-x="1090">
    </BasicTable>
    <n-modal  :show-icon="false" preset="dialog"  style="width: 1000px">
      <OrderDetail  />
      <OrderItem  />
      <!-- <OrderShipment v-if="checkedOrder.orderStatus == OrderStatusEnum.PAID_OFF" :orderId="checkedOrder.id"
        :order="checkedOrder" @update:shipment="handleShipment" /> -->
      <template #action>
        <n-space>
          <n-button >关闭</n-button>
        </n-space>
      </template>
    </n-modal>
  </n-card>
</template>

<script lang="ts" setup>
import {  ref, onMounted } from 'vue';
import { useMessage } from 'naive-ui';
import { BasicTable } from '@/components/Table';
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
import { getEmployerWeightCount } from '@/api/weight/statisticCount';
import {columns} from './columns'

const schemas = ref<FormSchema[]>([
  {
    field: 'time',
    component: 'NDatePicker',
    label: '结算时间',
    componentProps: {
      type: 'daterange',
      format: 'yyyy-MM-dd', // 显示格式为仅日期
      valueFormat: 'yyyy-MM-dd', // 值格式为仅日期
    },
    rules: [{ required: false }],
    //defaultValue: getTodayRange(), // 默认值设置为当天的日期范围
  },
  {
    field: 'employmentName',
    component: 'NInput',
    label: '操作员名称',
    rules: [{ required: false }],
  },
])



const message = useMessage();
// 确保actionRef正确初始化，设置为BasicTable实例的类型
const actionRef = ref<InstanceType<typeof BasicTable>>();
const allTotal = ref(0); // 总价响应式变量
const allWeightFee = ref(0); // 总磅费响应式变量

// 获取今天的日期范围（仅日期部分，不包含时间）
const getTodayRange = () => {
  const today = new Date();
  // 设置开始日期为今天（不包含具体时间）
  const startDate = new Date(today);
  startDate.setHours(0, 0, 0, 0);
  
  // 设置结束日期为今天（不包含具体时间）
  const endDate = new Date(today);
  endDate.setHours(0, 0, 0, 0);
  
  return [startDate, endDate];
};

// 初始化params为响应式对象，并直接设置默认的时间范围参数
// 这样可以确保在BasicTable组件初始化调用loadDataTable时就有时间参数
const params = ref<Recordable>({
  time: getTodayRange()
});

const [register, { setProps, setFieldsValue }] = useForm({
  layout: 'inline', // 设置为inline布局，使按钮右对齐
  gridProps: { cols: '1 s:1 m:2 l:2 xl:5 2xl:4' },
  labelWidth: 100,
  schemas,
  showAdvancedButton: false, // 隐藏展开/收起按钮
});

// 处理时间范围参数并整合所有查询条件
const loadDataTable = async (res) => {
  try {
     // 记录当前加载状态
    console.log('[loadDataTable] 开始加载数据，表格参数:', res);
    
    // 只提取和传递必要的参数，忽略分页参数
    const requestParams = { ...params.value };
    // 添加分页参数，因为API可能需要
    requestParams.current = res?.current || 1;
    requestParams.size = res?.size || 20;
    
    // 特殊处理日期范围参数
    if (requestParams.time && Array.isArray(requestParams.time) && requestParams.time.length === 2) {
      // 提取开始日期和结束日期
      const [startDate, endDate] = requestParams.time;
      
      // 确保只使用日期部分
      if (startDate && endDate) {
        // 转换为日期对象并设置时间范围
        const startDateObj = new Date(startDate);
        startDateObj.setHours(0, 0, 0, 0); // 开始时间设置为当天00:00:00
        
        const endDateObj = new Date(endDate);
        endDateObj.setHours(23, 59, 59, 999); // 结束时间设置为当天23:59:59
        
        // 转换为YYYY-MM-DD HH:mm:ss格式的字符串，符合后台接收要求
        requestParams.startTime = `${startDateObj.getFullYear()}-${String(startDateObj.getMonth() + 1).padStart(2, '0')}-${String(startDateObj.getDate()).padStart(2, '0')} 00:00:00`;
        requestParams.endTime = `${endDateObj.getFullYear()}-${String(endDateObj.getMonth() + 1).padStart(2, '0')}-${String(endDateObj.getDate()).padStart(2, '0')} 23:59:59`;
      }
      
      // 移除原始的time字段
      delete requestParams.time;
    } else {
      console.log('[loadDataTable] 没有检测到有效的日期范围参数:', requestParams.time);
    }
    console.log('[loadDataTable] API请求参数结果:', requestParams);
    // 调用API接口并返回结果
    const result = await getEmployerWeightCount(requestParams);
    console.log('[loadDataTable] API返回结果:', result);
    
    // 从API返回结果中提取总价和总磅费
    if (result) {
      allTotal.value = result.allTotal || 0;
      allWeightFee.value = result.allWeightFee || 0;
    }
    
    return result;
  } catch (error) {
    console.error('[loadDataTable] 加载列表数据异常:', error);
    message.error('加载数据失败，请稍后重试');
    return { list: [], total: 0 }; // 返回空数据避免表格显示错误
  }
};

function onCheckedRow(rowKeys) {
  console.log(rowKeys);
}



// 提交表单查询
function handleSubmit(values: Recordable) {
  // 存储表单值用于后续查询
  params.value = { ...values }; // 深拷贝避免引用问题
  // 重新加载表格数据
  reloadTable();
}

function reloadTable() {
  if (actionRef.value) {
    actionRef.value.reload();
  } else {
    console.error('actionRef未正确初始化');
  }
}

function handleReset(values: Recordable) {
  console.log(values);
}


// 组件挂载后加载数据
onMounted(async () => {
  try {

    // 创建新的schemas数组以确保响应式更新
    const newSchemas = [...schemas.value];
    
    // 一次性更新整个表单配置
    setProps({ schemas: newSchemas });
    
    // 设置默认的时间范围值为当天
    setTimeout(() => {
      const todayRange = getTodayRange();
      setFieldsValue({
        time: todayRange
      });
      // 同步更新params.value，确保默认时间参数被传递到API请求
      params.value = {
        time: todayRange
      };
      console.log('[onMounted] 默认时间参数已设置到params:', JSON.stringify(params.value, null, 2));
      
      // 不再手动调用reloadTable()，因为BasicTable组件的:request属性会自动触发一次加载
      // 这避免了刷新页面时的重复请求
    }, 100);
  } catch (error) {
    console.error('加载下拉框数据异常:', error);
    message.error('加载下拉框数据失败，请稍后重试');
  }
});


</script>

<style lang="less" scoped>
.n-form {
  :deep(.n-grid){
    display: flex !important;
    & > div{
      width: 240px;
    }
    & > div:nth-child(1){
      width: 360px;
    }
    & > div:nth-child(4){
      width: 720px;
    }
  }
}
</style>
